<template>
	<view class="content">
		<view class="list-item" v-for="(item,index) in list" :key="index"  >
			<view class="list-title"  @click="toDetail(item.guid)"  >
				<uv-text :lines="2" :text="item.title"></uv-text>
			</view>
			<view class="list-time">
				<uv-text type="info" :lines="2" :text="item.time"></uv-text>
				<uv-button type="primary" size="mini" text="编辑"  @click="editItem(index)"  ></uv-button>
				<uv-button type="error" size="mini" text="删除"  @click="delItem(index)"  ></uv-button>
			</view>
			<uv-gap height="5"></uv-gap>
		</view>
		<uv-gap height="100" ></uv-gap>
		<view class="footer-box">
			<uv-button type="primary" text="新增" style="width: 60%;"  @click="showModal()"  ></uv-button>
		</view>
		
		<uv-modal  ref="modal" :show="show" title="请输入标题" showCancelButton @cancel="show=false;"
			@confirm="dialogInputConfirm(title)">
			<uv-textarea v-model="title" placeholder="请输入标题" ></uv-textarea>
		</uv-modal>
		
		<uv-modal  ref="modalEdit" title="请输入标题" showCancelButton @cancel="show=false;"
			@confirm="dialogEditConfirm(title)">
			<uv-textarea v-model="title" placeholder="请输入标题" ></uv-textarea>
		</uv-modal>
		
	</view>
</template>

<script>
	import moment from 'moment/moment'
	// 引入
	import { guid } from '@/node_modules/@climblee/uv-ui/libs/function/index.js';
	export default {
		data() {
			return {
				show: false,
				title: '文章标题',
				list:[]
			}
		},
		onLoad() {
			console.log(guid());
			let list=uni.getStorageSync('aircle_list')
			this.list=list?list:[]
		},
		onUnload() {
			console.log('退出')
			uni.setStorageSync('aircle_list',this.list)
		},
		onHide() {
			console.log('退出-onHide')
		},
		beforeDestroy(){
			console.log('退出beforeDestroy')
		},
		methods: {
			showModal(){
				this.$refs.modal.open();
			},
			toDetail(guid){
				uni.navigateTo({
					url:"/pages/index/detail?guid="+guid
				})
			},
			editItem(index){
				this.index=index
				this.title=this.list[index].title
				this.$refs.modalEdit.open();
			},
			delItem(index){
				uni.showModal({
					title:"删除提醒",
					content:"确定删除此项吗？",
					success:(res)=> {
						if(res.confirm){
							uni.clearStorageSync(this.list[index].guid)
							this.list.splice(index,1)
						}
					}
				})
			},
			dialogInputConfirm(title){
				this.list.push({
					guid:guid(),
					title,
					time:moment().format('YYYY-MM-DD HH:mm:ss')
				})
				uni.setStorageSync('aircle_list',this.list)
			},
			dialogEditConfirm(title){
				this.list[index].title=this.title
				uni.setStorageSync('aircle_list',this.list)
			}
		}
	}
</script>

<style lang="scss"  >
	page{
		background: #f8f8f8;
	}
	
	.content {
		position: relative;
		
		
		
		.list-title{
			padding: 20rpx;
			
		}
		
		.list-item{
			background: #fff;
			border-radius: 5rpx;
			margin: 20rpx 30rpx;
			.list-time{
				margin: 10rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		
		
		.footer-box{
			position: fixed;
			bottom: 0;
			background: #fff;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
		}
		
		
	}
</style>
